<!-- 页面切换导航 -->
<template>
  <div class="right-menu">
    <Bell :connect="connect" />
    <div class="div-inline">
      <el-tooltip class="item" effect="light" content="点击跳转到实时预警监测页面" placement="bottom-end">
        <el-button
          type="primary"
          icon="el-icon-message-solid"
          plain
          @click="switchPanel('')"
        >
          预警
        </el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="light" content="点击跳转到数据分析页面" placement="bottom-end">
        <el-button
          type="primary"
          icon="el-icon-data-analysis"
          plain
          @click="switchPanel('analysis')"
        >
          分析
        </el-button>
      </el-tooltip>
      <el-button
        type="primary"
        icon="el-icon-arrow-right"
        plain
        @click="logout('analysis')"
      >
        退出
      </el-button>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  props: {
    connect: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    ...mapMutations({
      commitLogout: 'logout'
    }),
    switchPanel (path) {
      this.$router.push('/' + path)
    },
    logout() {
      this.$confirm('是否确定退出系统?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$auth.logout('local')
        this.commitLogout()
        this.$router.push('/login')
      })
    }
  }
}
</script>

<style>
.right-menu {
  float: right;
  height: 100%;
  line-height: 60px;
  width: 400px;
}

.div-inline {
  display: inline;
}
</style>
